<script setup>
import { ref, } from 'vue'
import throttle from 'lodash/throttle'
import debounce from 'lodash/debounce'
import _ from 'lodash'  // 引入整个lodash
const onClick = () => {
  debounceFunc()
}

const debounceFunc = debounce(() => console.log("防抖"), 1000);
const throttleFunc = throttle(() => console.log("节流"), 3000, { trailing: false });
//节流
const onClickjl = () => {
  throttleFunc()
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = _.cloneDeep(arr)
newArr[0] = 11
// console.log(newArr);
// console.log(arr);


// 图片预览

const images = [
  { src: 'https://ww2.sinaimg.cn/mw690/a66d0169ly8ho4bhoepd9j225o0zuhdt.jpg' },
  { src: 'https://img2.baidu.com/it/u=312784124,1019302206&fm=253&fmt=auto&app=120&f=JPEG?w=654&h=368' },
  { src: 'https://img1.baidu.com/it/u=1943024765,2702844290&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=335' }
];


</script>

<template>
  <el-button type="primary" @click="onClick">防抖</el-button>
  <el-button type="primary" @click="onClickjl">节流</el-button>
  <div class="img">
    <viewer :images="images">
      <img v-for="src in images" :src="src.src" :key="src">
    </viewer>
  </div>

</template>

<style scoped lang="scss">
.img {
  img {
    width: 500px;
    height: 300px;
  }
}
</style>